<script setup>
import {ElLoading, ElMessage} from 'element-plus';
import { onMounted } from 'vue';
import router from "@/router";

const showLoadingAndRedirect = () => {
  const loading = ElLoading.service({
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  setTimeout(() => {
    loading.close();
    ElMessage({
      message: '请先登录',
      type: 'warning',
      center: true,
      duration: 2000,
      onClose: () => {
        router.push('/login');
      }
    });
  }, 2000);
};

onMounted(() => {
  showLoadingAndRedirect();
});
</script>

<template>
  <div class="hello-container">
    <h1>{{ message }}</h1>
    <p>你需要登录才能访问该页面</p>
  </div>
</template>

<style scoped>
.hello-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: 'Arial', sans-serif;
}

h1 {
  color: #42b983;
  font-size: 3rem;
  margin-bottom: 20px;
}

p {
  color: #666;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
</style>
